<template>
	<!-- 收付款记录 -->
	<view class="shell_wp">
		<!-- <view class="title">营业额统计</view> -->
		<!-- <view class="title2">(多米街用户消费明细)</view> -->
		<view class="shell_detailed">
			<view>标头</view>
			<view>今日</view>
			<view>昨日</view>
			<view>本月</view>
			<view>上月</view>
		</view>
		<view class="shell_detailed">
			<view>营业额</view>
			<view>{{headInfo.curDay}}</view>
			<view>{{headInfo.yesDay}}</view>
			<view>{{headInfo.curMoth}}</view>
			<view>{{headInfo.priMoth}}</view>
		</view>
		<view class="shell_detailed">
			<view>实收到账</view>
			<view>{{headInfo.curDayReceipt}}</view>
			<view>{{headInfo.yesDayReceipt}}</view>
			<view>{{headInfo.curMothReceipt}}</view>
			<view>{{headInfo.priMothReceipt}}</view>
		</view>
		<view class="shell_detailed">
			<view>让利额</view>
			<view>{{headInfo.curDayDis}}</view>
			<view>{{headInfo.yesDayDis}}</view>
			<view>{{headInfo.curMothDis}}</view>
			<view>{{headInfo.priMothDis}}</view>
		</view>
		<view class="shell_detailed">
			<view>补贴到账</view>
			<view>{{headInfo.curDayAcc}}</view>
			<view>{{headInfo.yesDayAcc}}</view>
			<view>{{headInfo.curMothAcc}}</view>
			<view>{{headInfo.priMothAcc}}</view>
		</view>
		<view class="shell_list">
			<view class="shell_item" v-for="(item,i) in list" :key="i">
				<view class="shell_li">
					<text class="shell_li_title" style="color: #027908;">{{item.title}}</text>
					<!-- <text v-if="item.balance !== '0.00'">顾客原价消费：<text class="s_money"style="color: #8405dc;">{{item.price}}</text></text> -->
					<!-- <text v-if="item.balance == '0.00'">消费金额：<text class="s_money">{{item.price}}</text></text> -->
					<text>支付金额：<text class="s_money" style="color: #8405dc;">{{item.price}}</text></text>
				</view>
				<view class="shell_li">
					<text class="shell_li_title">付款人：<text class="s_remarks">{{item.remark}}</text></text>
					<text>让利金额：<text class="s_money" style="color: #8405dc;">{{item.needmoney}}</text></text>
					<!-- <text v-if="item.credit1">米币：<text class="s_money">{{item.credit1}}</text></text> -->
					<!-- <text v-if="!item.credit1&&item.money">支付现金：<text class="s_money" style="color: #999;">{{item.money}}</text></text> -->
				</view>
				<view class="shell_li">
					<text class="shell_li_title">支付：<text class="s_remarks">{{item.createtime}}</text></text>
					<text>到账金额：<text class="s_money">{{item.realmoney}}元</text></text>
					<!-- <text v-if="item.credit1&&item.money">现金：<text class="s_money">{{item.money}}</text></text> -->
					<!-- <text  v-if="item.balance !== '0.00'">卡内余额：<text class="s_money">{{item.balance}}元</text></text> -->
				</view>
				<view class="shell_li">
					<text class="shell_li_title">核销：<text class="s_remarks"><text>{{item.checktime}}</text></text></text>
					<text>应补贴金额：<text class="s_money" style="color: #8405dc;">{{item.ratesupmoney}}</text></text>
				</view>
				<view class="shell_li">
					<text class="shell_li_title" v-if="item.checkmid>0">核销店员： <text style="color: #8405dc;">{{item.checkname}}<text v-if="item.checkmid>0">({{item.checkmid}})</text></text></text>
				</view>
				<view class="shell_li">
					<text class="shell_li_title"></text>
					<text>已补贴金额：<text class="s_money" style="color: #8405dc;">{{item.sendsupmoney}}</text></text>
				</view>
			</view>
		</view>
		<view class="loading_message">
			<image v-if="isloading" src="../../static/business/loading.gif"></image>
			<view v-if="isempty">到底了~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 0,
				list: [],
				isempty: false,
				isloading: false,
				headInfo:[],
			}
		},
		onReachBottom() {
			this.getilist();
		},
		onLoad() {
			this.getilist();
			this.headIncome();
		},
		methods: {
			getilist() {
				this.page += 1;
				this.isloading = true;
				this.$axios('transLog/income', 'POST', 'bonus', {
					page: this.page
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						let length = res.data.data.length;
						this.list = this.list.concat(res.data.data);
						this.isempty = length <= 0 ? true : false;
					}
				})
			},
			headIncome() {
				this.$axios('transLog/headIncome', 'POST', 'bonus').then(res => {
					if (res.data.code == 200) {
						this.headInfo = res.data.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f2f2;
		color: $font-color-dark;
	}
	.shell_wp {
		padding-bottom: 100upx;
	}
	.title {
		font-size: 34upx;
		font-weight: bold;
		padding-top: 14upx;
		display: flex;
		justify-content: center;
		// vertical-align:middle;
	}
	.title2 {
		font-size: 28upx;
		color:#555 ;
		font-weight: bold;
		padding-top: 10upx;
		display: flex;
		justify-content: center;
		// vertical-align:middle;
	}
	.shell_detailed {
		font-size: 30rpx;
		color:#333 ;
		font-weight: bold;
		padding: 10rpx;
		display: flex;
		justify-content: space-between;
		view{
			width: calc(90% / 4);
			text-align: center;
		}
		view:first-child{
			width: 18%;
			white-space: nowrap;
		}
		&:first-child{
			background: $bg-color;
			color: #fff;
		}
	}

	.shell_item {
		background-color: #fff;
		border-radius: 10upx;
		padding: 20upx;
		margin: 0 20upx 20upx;
	}

	.shell_li {
		display: flex;
		align-items: center;
	}

	.shell_li text {
		line-height: 40upx;
	}

	.s_time {
		color: $font-color-light;
	}

	.shell_li_title {
		flex: 1;
		margin-right: 10upx;
		font-weight: bold;
	}

	.s_money {
		font-weight: bold;
		color:#f03201 ;
	}

	.s_remarks {
		color: #999;
	}

	.loading_message image {
		display: block;
		margin: 0 auto;
		height: 60upx;
		width: 60upx;
	}

	.loading_message view {
		text-align: center;
		color: $font-color-spec;
	}
</style>